<template>
  <div class="persondata">
    <Settingheader :titletext="out" :backpage="ao"></Settingheader>
  
    <div class="content">
  
      <div class="content1">
        <div class="div_img">
          <img src="../images/IMG_chanpingxiangqing_1.png" />
        </div>
        <div class="div_info">
          <p>雅诗兰黛面膜 红石榴鲜活亮采晚霜</p>
          <p>参考价:780￥/50ml</p>
          <p>产品说明书</p>
          <p>功效:深彻润透肌肤......</p>
          <p>适用肤质:中性/混合性肌肤</p>
          <p>针对:细纹、皱纹松弛 干燥、缺水黯哑、无光无油</p>
          <p>主要科技/成分:"智慧新生态"科技,皱纹填充技术</p>
        </div>
      </div>
      <h3>购买推荐</h3>
  
      
      <div class="content2">
        <!--第一条-->
        <div class="con">
          <div class="div_img">
            <img src="../images/IMG_chanpingxiangqing_2.png" />
          </div>
          <div class="div_info">
            <p>天天网</p>
            <p>价格:￥
              <span>359.00</span>
            </p>
            <p>市场价:￥
              <del>540.00</del>
            </p>
          </div>
          <div class="div_pingjia">
            <p>
              <img src="../images/icon_BANNER_4.png" />
              <span>1100人评价</span>
            </p>
          </div>
        </div>
        <!--第二条-->
        <div class="con">
          <div class="div_img">
            <img src="../images/IMG_chanpingxiangqing_2.png" />
          </div>
          <div class="div_info">
            <p>天天网</p>
            <p>价格:￥
              <span>388.00</span>
            </p>
            <p>市场价:￥
              <del>540.00</del>
            </p>
          </div>
          <div class="div_pingjia">
            <p>
              <img src="../images/icon_BANNER_4.png" />
              <span>3900人评价</span>
            </p>
          </div>
        </div>
        <!--第三条-->
        <div class="con">
          <div class="div_img">
            <img src="../images/IMG_chanpingxiangqing_3.png" />
          </div>
          <div class="div_info">
            <p>天天网</p>
            <p>价格:￥
              <span>358.00</span>
            </p>
            <p>市场价:￥
              <del>540.00</del>
            </p>
          </div>
          <div class="div_pingjia">
            <p>
              <img src="../images/Icon_wpfaqidejindian_talk.png" />
              <span>2930人评价</span>
            </p>
          </div>
        </div>
      </div>
  
    </div>
    <!--口碑点评 相关话题  相似产品-->
    <ul>
      <li class="active">口碑点评</li>
      <li>|</li>
      <li>相关话题</li>
      <li>|</li>
      <li>相似产品</li>
    </ul>
  
    <div class="content3">
      <div class="pingjia">
        <div class="xing">
          <!--<el-rate v-model="value5" disabled show-text text-color="#7a7a7a" text-template="{value}">
          </el-rate>-->
          <p>4.0</p>
               <div> 
                 <img src="../images/icon_chanpingxiangqing_2.png" /> 
                 <img src="../images/icon_chanpingxiangqing_2.png" /> 
                 <img src="../images/icon_chanpingxiangqing_2.png" /> 
                 <img src="../images/icon_chanpingxiangqing_2.png" /> 
                 <img src="../images/icon_chanpingxiangqing_3.png" /> 
               </div>
        </div>
        <div class="range">
          <el-progress :percentage="80" :stroke-width="16"></el-progress>
          <el-progress :percentage="80" :stroke-width="16"></el-progress>
          <el-progress :percentage="40" :stroke-width="16"></el-progress>
          <el-progress :percentage="14" :stroke-width="16"></el-progress>
          <el-progress :percentage="7"  :stroke-width="16"></el-progress>
        </div>
  
      </div>
      <div class="xujiao">
      <div class="d1">
            <img src="../images/icon_chanpingxiangqing_4.png"/>
            <span>徐娇</span>
      </div>
      <div class="d2">
        <img src="../images/icon_touxiang_02.png"/>
        <div>众所周知，眼部肌肤往往是脆弱，容易衰老，容易暴露您的年龄的。雅诗兰黛（Estee Lauder）青春抗皱滋润眼霜5ml,采用了三项针对眼部不同问题的最新技术。令您的脆弱...</div>
      </div>


    </div>
    
    
    
    
    
    
    </div>
  
    <div></div>
    <div></div>
    <div></div>
  
  </div>
</template>

<script>
import Settingheader from '../components/settingheader.vue'
export default {
  name: 'Productcon',
  data() {
    return {
        out:'产品详情',
        ao:'/blusher',
        value5: "4"
      }
  },
  components:{
    Settingheader
  }
}


</script>


<style scoped lang="less">
.persondata {
  font-size: 28/75rem;

  .header {
    width: 100%;
    height: 90/75rem;
    background: #ff406f;
    img {
      display: inline-block;
      margin-top: 24/75rem;
      margin-left: 20/75rem;
      width: 40/75rem;
      height: 40/75rem;
    }
    span {
      color: #fff;
      line-height: 90/75rem;
      margin-left: 220/75rem;
      font-size: 28/75rem;
    }
  }


  .content {
    padding: 64/75rem 20/75rem 0 20/75rem;
    .content1 {
      width: 100%;
      overflow: hidden;
      .div_img {
        float: left;
        text-align: center;
        padding: 5/75rem;
        border: 1/75rem solid black;
        border-radius: 6/75rem;
        img {
          width: 185/75rem;
          height: 185/75rem;
        }
      }


      .div_info {
        width: 430/75rem;
        font-size: 14/75rem;
        float: left;
        margin-left: 50/75rem;
        p{
          line-height:25/75rem;
        }
        p:nth-child(1) {
          font-size: 24/75rem;
          line-height: 38/75rem;
          height: 40/75rem;
        }
        p:not(:first-child) {
          font-size: 18/75rem;
        }
      }
    }
    h3 {
      font-size: 28/75rem;
      height: 60/75rem;
      margin-top: 35/75rem;
    }

    .content2 {
      border: 1/75rem solid #f1f1f1;
      border-radius: 8/75rem;
      box-shadow: 3/75rem 3/75rem 5/75rem #f1f1f1; // width:100%;
      padding: 0 15/75rem 25/75rem;
      .con {
        margin-top: 25/75rem;
        overflow: hidden;
        .div_img {
          float: left;
          text-align: center;
          padding: 5/75rem;
          border: 1/75rem solid black;
          border-radius: 6/75rem;
          img {
            width: 125/75rem;
            height: 125/75rem;
          }
        }


        .div_info {
          width: 270/75rem;
          font-size: 14/75rem;
          float: left;
          margin-left: 50/75rem;
          p:nth-child(1) {
            font-size: 24/75rem;
            line-height: 38/75rem;
            height: 40/75rem;
            margin-top: 10/75rem;
          }
          p:not(:first-child) {
            font-size: 18/75rem;
            margin-top: 10/75rem;
          }
        }

        .div_pingjia {
          padding-top: 90/75rem;
          img {
            display: inline-block;
          }
        }
      }
    }
  }
  // 口碑点评 相关话题  相似产品的样式
  ul {
        display: block;
        margin: 20/75rem auto;
        width: 600/75rem;
        // border: 1/75rem solid black;
        text-align: center;
        overflow: hidden;
        li {
          float: left;
          padding: 10/75rem 24/75rem;
          font-size: 24/75rem;
        }
        .active {
          color: #ff406f;
        }
        li:nth-child(2),
        li:nth-child(4) {
          font-weight: 700;
        }
  }

  .content3{
    padding:50/75rem  30/75rem  0  55/75rem;
    border-radius:6/75rem;
    // width:714/75rem;
    // height:308/75rem;
    // box-shadow: 0 0  20/75rem;
    .pingjia{
       overflow: hidden;
       .xing{
          // margin-left: 80/75rem;
          float:left;
          width:175/75rem;
          height:300/75rem;
          // padding-top:50/75rem;
          p{
            text-align: center;
            margin-bottom:10/75rem;
            
          }
          img{
            float: left;
            margin:0 5/75rem;
          }
      }
      .range{
          padding-top:30/75rem;
          padding-left:80/75rem;
          float:left;
          width:300/75rem;
          height:300/75rem;
         
      }


    }
    .xujiao{
      font-size:18/75rem;
      .d1{
          img{
            width:20/75rem;
            height:20/75rem;
            display: inline-block;
          }
          span{

          }
      }
      .d2{
          margin-top:10/75rem;
          img{
            margin-left:30/75rem;
            width:80/75rem;
            height:80/75rem;
            display: inline-block;
            vertical-align: top;
          }
          div{
            width:490/75rem;
            padding:0 30/75rem;
            line-height:20/75rem;
            display: inline-block;
            line-height: 28/75rem;
            
            
          }
      }
    }
  }
}
</style>
